<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>Bilibili 屏蔽词分享平台</title>

    <%- include("template/head"); %>
    <link href="css/range.css" rel="stylesheet">

</head>

<body>
    <div id="main-container">
        <%- include("template/header"); %>
        <div class="container">
            <div v-if="share_first">
                <form action="share_user_blacklist" method="POST">
                    <input type="submit" value="上传我的屏蔽列表" class="btn btn-primary btn-block" />
                </form>
                <br>
                很抱歉，为了避免先屏蔽再上传导致的<a href="https://github.com/abc612008/bilibili_blacklist/issues/1">屏蔽用户的马太效应</a>，只有上传了屏蔽列表的人才能查看用户屏蔽列表。
            </div>
            <div v-if="!share_first">
                <div style="margin: 30px 0">
                    <label for="filter_range">只显示被 {{filter}} 人以上屏蔽的用户</label>
                    <input type="range" class="slider" min="0" max="20" id="filter_range" v-model="filter" v-on:change="load">
                    <button class="btn btn-primary" v-on:click="block" style="margin: 20px 0">全部屏蔽 ({{Object.keys(user_sharelist).length}}个)</button>
                </div>
                <div class="card" v-for="key in Object.keys(user_sharelist_by_filter).sort(function(a, b){return b-a;})" style="margin:10px 0">
                    <div class="card-body">
                        <h5 class="card-title">被 {{key}} 人屏蔽的用户 ({{user_sharelist_by_filter[key].length}}个)</h5>
                        <p class="card-text" style="font-family:monospace;font-size:1.5em">
                            <span v-for="i in user_sharelist_by_filter[key]" style="display:inline-block;padding:2px;margin:2px;">{{i}}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /container -->
    </div>
    <%- include("template/foot"); %>

    <script>
        var app = new Vue({
            el: '#main-container',
            data: {
                user_sharelist: [],
                user_sharelist_by_filter: [],
                notLogin: document.cookie.indexOf('bilibili_cookies=') == -1,
                apply_status: {},
                tip: document.cookie.indexOf('tip=') != -1,
                share_first: false,
                filter: 3,
                uid: function () {
                    var arr, reg = new RegExp("(^| )uid=([^;]*)(;|$)");
                    if (arr = document.cookie.match(reg))
                        return unescape(arr[2]);
                    else
                        return null;
                }()
            },
            methods: {
                apply: function (id) {
                    if (this.notLogin) {
                        window.location.href = "login.html";
                        return;
                    }
                    if (this.apply_status[this.detailid] != undefined) return;
                    this.$http.post('add_item', { type: 2, filter: id }).then(response => {
                        this.$set(this.apply_status, id, true);
                        sessionStorage.apply_status = JSON.stringify(this.apply_status);
                        this.tipIfNeeded();
                    }, response => {
                        console.log("Failed to fetch blacklist")
                    });
                },
                tipIfNeeded: function () {
                    if (!this.tip) {
                        this.tip = true;
                        var date = new Date();
                        date.setTime(date.getTime + 12 * 30 * 24 * 3600 * 1000);
                        document.cookie = "tip=1; expires=" + date.toGMTString();

                        alert("修改成功，请打开任意一个B站视频，点击播放器右侧【屏蔽设定】里的【同步屏蔽列表】以生效修改！");
                    }
                },
                block: function () {
                    var list = Object.keys(this.user_sharelist);
                    for(var i in list) this.apply(list[i]);
                    alert("屏蔽成功！");
                    this.tipIfNeeded();
                },
                load: function () {
                    this.$http.get('fetch_user_sharelist?filter=' + this.filter).then(response => {
                        if (response.body.code == -2) { // 要先分享才能查看用户屏蔽列表
                            this.share_first = true;
                            return;
                        }
                        this.user_sharelist = response.body;
                        this.user_sharelist_by_filter = [];
                        for (var uid in response.body) {
                            if (!this.user_sharelist_by_filter[response.body[uid]])
                                this.user_sharelist_by_filter[response.body[uid]] = [];
                            this.user_sharelist_by_filter[response.body[uid]].push(uid);
                        }
                    }, response => {
                        console.log("Failed to fetch user sharelist");
                    });
                }
            },
            mounted: function () {
                if (this.notLogin) window.location.href = "login.html";
                try { this.apply_status = JSON.parse(sessionStorage.apply_status); }
                catch (ex) { this.apply_status = {}; }
                this.load();
            }
        });
    </script>
</body>

</html>